<template>
	<view>
		<view class="field-list">
			<view class="field-item">
				<text>{{$t('operate.orderCancellationTime')}}</text> <!--普通商品未支付取消订单时间-->
				<view class="right">
					<u-number-box v-model="value" :min="0" :max="999999"></u-number-box>
				</view>
			</view>
			<view class="field-item">
				<text>{{$t('operate.cancellationOfOrderDueToUnpaidItems')}}</text> <!--活动商品未支付取消订单-->
				<view class="right">
					<u-number-box v-model="activityOrderTime" :min="0" :max="999999"></u-number-box>
				</view>
			</view>
		</view>
		<view class="bottomBox" :style="{paddingBottom: `${bottomLift}px`}">
			<view class="button">
				<view class="add-button" @click="addClick">{{$t('publicLang.save')}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	let app = getApp();
	import {
		mapGetters
	} from "vuex";
	import {
		updOrderTimeApi,
		getOrderTimeApi
	} from '@/api/api.js';
	export default {
		data() {
			return {
				value:0,
				activityOrderTime:0,
				bottomLift: app.globalData.bottomLift,
			}
		},
		computed: mapGetters(["merId"]),
		onLoad() {
			this.getList();
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('navigation.orderAging')
			});
		},
		methods: {
			getList() {
				let _this = this
				getOrderTimeApi().then((res) => {
					if (res.data) {
						this.value = res.data.orderTime;
						this.activityOrderTime = res.data.activityOrderTime
					}
				});
			},
			addClick() {
				let _this = this
				updOrderTimeApi({orderTime:this.value,activityOrderTime:this.activityOrderTime}).then((res) => {
					_this.$util.Tips({
						title: _this.$t('publicLang.successfulOperation')
					});
					_this.getList()
				})
			}
		}
	}
</script>

<style lang="scss">
	.field-list {
		background-color: #FFFFFF;

		.field-item {
			color: #666666;
			height: 108rpx;
			padding: 0 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #F5F5F8;

			.right {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				flex: 1;
				text-align: right;
				margin-left: 20rpx;

				.notEntered {
					display: flex;
					align-items: center;
					color: #BBBBBB;
				}

				.iconfont {
					font-size: 20rpx;
				}

				.placeholderClass {
					color: #BBBBBB;
				}

				input {
					width: 100%
				}
			}

			.right ::v-deep .u-delete-icon {
				width: 30rpx;
				height: 30rpx;
				top: 0rpx;
				right: 0rpx;
			}
		}
	}

	.tips {
		color: #BBBBBB;
		font-size: 20rpx;
		margin: 45rpx 40rpx;
	}

	.bottomBox {
		background-color: #FFFFFF;
		width: 100%;
		position: fixed;
		bottom: 0;
	}

	.button {
		width: 100%;
		height: 128rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.add-button {
		width: 690rpx;
		height: 92rpx;
		background-color: #111111;
		color: #FFFFFF;
		font-size: 32rpx;
		text-align: center;
		line-height: 92rpx;
	}
</style>
